<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>markdown编辑器</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="plugins-tips">
                mavonEditor：基于Vue的markdown编辑器。 访问地址：<a href="https://github.com/hinesboy/mavonEditor" target="_blank"
                    >mavonEditor</a
                >
            </div>
            <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px" />
            <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
        </div>
        <div v-html="code" ref="content" @click="imageEnlargement">
            {{ code }}
        </div>
    </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
//import { getRichText } from '../../api/index';
import data from './data.js';
export default {
    name: 'markdown',
    data: function () {
        return {
            code: '',
            content: '',
            html: '',
            configs: {},
            type: ''
        };
    },
    components: {
        mavonEditor
    },
    created() {
        //console.log(this.code);
        getRichText().then((res) => {
            //console.log(res);
            //this.code = res.data;
        });
    },
    mounted() {
        if (this._isMobile()) {
            //   alert("手机端");
            //console.log(this.type);
        } else {
            //   alert("pc端");
        }
    },
    methods: {
        _isMobile() {
            let flag = navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            );
            this.type = navigator.userAgent;
            return flag;
        },
        // urltext() {
        //     let loc = location.href;
        //     let n1 = loc.length; //地址的总长度
        //     let n2 = loc.indexOf('='); //取得=号的位置
        //     let outToken = loc.substr(n2 + 1, n1 - n2); //从=号后面的内容
        //     //console.log(loc, n1, n2, outToken);
        //     // this.outTokenPost(outToken); //传到处理函数
        // },
        imageEnlargement(e) {
            if (e.target.nodeName == 'IMG') {
                //判断点击富文本内容为img图片
                // ImagePreview({
                //     images: [e.target.currentSrc], //获取当前图片src
                //     showIndex: false,
                //     loop: false
                // });
                ////console.log(e.srcElement.alt);
                // location.href+='www.baidu.com'
                // //console.log(WebViewActivity);
                // //console.log(location.href);
                // //console.log(window.android);
                // //console.log(window);

                // var str ='aaa' +e.srcElement.alt+'bbb'

                // str = str.match(/<aaa>(\S*)<bbb>/)[1];
                //console.log(str);
            } else {
                //console.log('点击内容不为img');
            }
        },
        // 将图片上传到服务器，返回地址替换到md中
        $imgAdd(pos, $file) {
            var formdata = new FormData();
            formdata.append('file', $file);
            // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
            this.$axios({
                url: '/common/upload',
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' }
            }).then((url) => {
                this.$refs.md.$img2Url(pos, url);
            });
        },
        change(value, render) {
            // render 为 markdown 解析后的结果
            this.html = render;
            //console.log(value);
            //console.log(render);
            render=''
        },
        submit() {
            //console.log(this.content);
            //console.log(this.html);
            this.$message.success('提交成功！');
        }
    }
};
</script>
<style scoped>
.editor-btn {
    margin-top: 20px;
}
</style>